<template>
  <h3>方法事件处理器:触发函数</h3>
  <div >
    <button @click="addCount" >Add</button>
    <p>计数器结果: {{clickCount}}</p>
    <p> 这里每次点击都会触发js里面的函数方法,每次累加2</p>
  </div>

  <h4>事件绑定参数</h4>
  <div >
    <button @click="addCount2('hello')" >Add2</button>
    <p>计数器结果: {{clickCount2}}</p>
    <p> 这里每次点击都会触发js里面的函数方法,每次累加2</p>
  </div>
</template>
<script>
export default {
  data() {
    return{
      count:0,
      clickCount:0,
      clickCount2:0,
    }
  },
  methods: {
    // 这里通过参数把事件对象获取到
    addCount(e) {
      // 这里还可以通过修改对象的显示数据
      e.target.innerHTML = "Add" + this.clickCount
      // vue 里面的event对象,就是原生js的event对象
      console.log("点击了按钮",e.target)
      this.clickCount += 2
    },
    addCount2(e) {
      // 显示传递过来的参数
      console.log(e)
      this.clickCount += 2
    },
  }
}
</script>